import React, { useState,useEffect,createContext,useContext  } from 'react'
import { Route, Link } from 'react-router-dom'
import List from './list'
import Home from './home'
import UseContextApp from './useContext'
import UseReducerApp from './useReducer'
import UseReducerApp1 from './useReducer/index.js'
import UseReducerApp2 from './xingneng'

const CountContext = createContext()

function GetContextApp(){
    const count = useContext(CountContext)
    return (<h2>you clicked {count} times</h2>)
}

function ReactHooks() {
    const [count, setCount] = useState(0)
    useEffect(()=>{
        console.log(`count ++  ${ count }`);
    },[ count ])
    return (<div className="box">
        <h2>useState、useEffect、useContext 的使用</h2>
        <p>you clicked {count} times</p>
        <hr/>
        <CountContext.Provider value={count}>
            <GetContextApp />
        </CountContext.Provider>
        <button onClick={() => { setCount(count + 1) }}>click me</button>
        <div>
            <ul>
                <li><Link to="/hooks/">home</Link></li>
                <li><Link to="/hooks/list">list</Link></li>
                <li><Link to="/hooks/useContext">useContext</Link></li>
                <li><Link to="/hooks/userReducer">useReducer</Link></li>
                <li><Link to="/hooks/userReducer/1">useReducer-demo</Link></li>
                <li><Link to="/hooks/userReducer/xingneng">useReducer-demo1</Link></li>
            </ul>
            <Route exact path="/hooks/" component={ Home } />
            <Route exact path="/hooks/list" component={ List } />
            <Route exact path="/hooks/userReducer" component={ UseReducerApp } />
            <Route exact path="/hooks/userReducer/1" component={ UseReducerApp1 } />
            <Route exact path="/hooks/userReducer/xingneng" component={ UseReducerApp2 } />
            <CountContext.Provider value={count}>
                <Route exact path="/hooks/useContext" component={ UseContextApp } />
            </CountContext.Provider>

        </div>
        <hr/>
        <CountContext.Provider value={count}>
            <UseContextApp />
        </CountContext.Provider>
    </div>)
}
export { ReactHooks, CountContext }